<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue2 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

</head>

<body>
<div id="app">
    <div class="box">
        <table>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>电话</th>
                <th>职位</th>
                <th>入职时间</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            <tr v-if="StaffsInfos.length==0">
                <th colspan="8">暂无数据</th>
            </tr>
            <tr v-else v-for="(item,index) in StaffsInfos" :key="index">
                <td>{{ item.id}}</td>
                <td>{{ item.name}}</td>
                <td>{{ item.age}}</td>
                <td>{{ item.phone}}</td>
                <td>{{ item.sta_pos}}</td>
                <td>{{ item.add_time}}</td>
                <td>{{ item.update_time}}</td>
                <td>
                    <a href="javascript:;" @Click="StaffsDelete(item.id)">删除</a>
                    |
                    <a href="javascript:;" @Click="openUpdateBox(item)">修改</a>
                </td>
            </tr>
        </table>
        <div class="btn">
            <input type="button" value="新增" @click="openAddBox()"/>
        </div>
    </div>
    <div class="updateBox">
        <div class="content">
            <div class="close">
                <a href="javascript:;" @click="closeUpdateBox()">X</a>
            </div>
            <div class="title">
                <span>修改人员信息</span>
            </div>
            <div class="form">
                <div>
                    <span>序号</span>
                    <input type="text" id="id" disabled>
                </div>
                <div>
                    <span>姓名</span>
                    <input type="text" id="name">
                </div>
                <div>
                    <span>年龄</span>
                    <input type="number" id="age">
                </div>
                <div>
                    <span>联系方式</span>
                    <input type="number" id="phone">
                </div>
                <div>
                    <span>职位</span>
                    <input type="text" id="sta_pos">
                </div>
                <div>
                    <span>入职时间</span>
                    <input type="datetime-local" id="add_time">
                </div>
                <div>
                    <span>更新时间</span>
                    <input type="datetime-local" id="update_time">
                </div>
            </div>
            <div class="btn">
                <input type="button" value="关闭" @click="closeUpdateBox()"/>
                <input type="button" value="修改保存" @click="updateStaffs()"/>
            </div>
        </div>
    </div>
    <div class="addBox">
        <div class="content">
            <div class="close">
                <a href="javascript:;" @click="closeAddBox()">X</a>
            </div>
            <div class="title">
                <span>新增人员信息</span>
            </div>
            <div class="form">
                <div>
                    <span>序号</span>
                    <input type="text" id="iid">
                </div>
                <div>
                    <span>姓名</span>
                    <input type="text" id="iname">
                </div>
                <div>
                    <span>年龄</span>
                    <input type="number" id="iage">
                </div>
                <div>
                    <span>联系方式</span>
                    <input type="number" id="iphone">
                </div>
                <div>
                    <span>职位</span>
                    <input type="text" id="ista_pos">
                </div>
            </div>
            <div class="btn">
                <input type="button" value="关闭" @click="closeAddBox()"/>
                <input type="button" value="新增保存" @click="addStaffs()"/>
            </div>
        </div>
    </div>
</div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }

    .updateBox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .addBox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 500px;
        height: 600px;
        background-color: #fff;
        border-radius: 5px;
    }

    .close {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 20px;
        color: #000;
        cursor: pointer;
    }

    .close a {
        color: #000;
    }

    .form {
        height: 400px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 10px 10px;
    }

    .form div {
        margin-bottom: 10px;
    }

    .form span {
        display: inline-block;
        width: 100px;
        text-align: right;
        margin-right: 10px;
    }

    .form input[type="text"], .form input[type="number"] {
        width: 200px;
        height: 30px;
        border: 1px solid #ccc;
        padding: 5px;
    }

    .form input[type="radio"] {
        margin-right: 10px;
    }

    .btn {
        text-align: center;
        margin-top: 20px;
    }

    .title {
        padding: 20px;
        font-size: 20px;
        font-weight: bold;
    }

    .box {
        width: 1000px;
        height: 500px;
        margin: 0 auto;
    }

    .box table {
        width: 100%;
        border-collapse: collapse;
    }

    .box table th, td {
        border: 1px solid #ccc;
        height: 50px;
        text-align: center;
    }

    .box table th {
        background-color: #f2f2f2;
    }

    .box table tr:nth-child(odd) {
        background-color: #f2f2f2;
    }

    .box table tr:hover {
        background-color: #999;
        transition: all 0.5s ease;
    }
</style>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            StaffsInfos: []
        },
        methods: {
            async getStaffsInfo() {
                const res = await axios.get('http://localhost:8080/staffsServlet');
                console.log(res.data);
                this.StaffsInfos = res.data;
            },
            async updateStaffs() {
                const Staffs = {
                    id: $('#id').val(),
                    name: $('#name').val(),
                    age: $('#age').val(),
                    phone: $('#phone').val(),
                    sta_pos: $('#sta_pos').val(),
                    add_time: $('#add_time').val().replace("T", " "),
                    update_time: $('#update_time').val().replace("T", " ")
                }
                const params = new URLSearchParams();
                params.append("id", Staffs.id);
                params.append("name", Staffs.name);
                params.append("age", Staffs.age);
                params.append("phone", Staffs.phone);
                params.append("sta_pos", Staffs.sta_pos);
                params.append("add_time", Staffs.add_time);
                params.append("update_time", Staffs.update_time);
                const res = await axios.post('http://localhost:8080/updateStaffs', params);
                console.log(res.data);
                alert(res.data);
                this.closeUpdateBox();
                await this.getStaffsInfo();
            },
            async addStaffs() {

                const Staffs = {
                    id: $('#iid').val(),
                    name: $('#iname').val(),
                    age: $('#iage').val(),
                    phone: $('#iphone').val(),
                    sta_pos: $('#ista_pos').val(),
                    add_time: this.getCurrentTime(),
                    update_time: this.getCurrentTime()
                }
                const params = new URLSearchParams();
                params.append("id", Staffs.id);
                params.append("name", Staffs.name);
                params.append("age", Staffs.age);
                params.append("phone", Staffs.phone);
                params.append("sta_pos", Staffs.sta_pos);
                params.append("add_time", Staffs.add_time);
                params.append("update_time", Staffs.update_time);
                const res = await axios.post('http://localhost:8080/insertStaffs', params);
                console.log(res.data);
                alert(res.data);
                this.closeAddBox();
            },
            async deleteStaffs(id) {
                const params = new URLSearchParams();
                params.append("id", id);
                const res = await axios.post('http://localhost:8080/deleteStaffs', params);
                console.log(res.data);
                alert(res.data);
                await this.getStaffsInfo();
            },
            StaffsDelete(id) {
                if (confirm('是否删除?')) {
                    this.deleteStaffs(id);
                }
            },
            openUpdateBox(item) {
                $('#id').val(item.id);
                $('#name').val(item.name);
                $('#age').val(item.age);
                $('#phone').val(item.phone);
                $('#sta_pos').val(item.sta_pos);
                $('#add_time').val(item.add_time);
                $('#update_time').val(item.update_time);
                $('.updateBox').show();
            },
            openAddBox() {
                $('.addBox').show();
            },
            closeAddBox() {
                $('.addBox').hide();
            },
            closeUpdateBox() {
                $('.updateBox').hide();
            },
            getCurrentTime() {
                const d = new Date();
                return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`;
            }

        },
        mounted() {
            this.getStaffsInfo();
        }
    });
</script>

</html>